<template>
  <div class="my-tag">
    <input v-if="flag" class="input" ref="bqa" type="text" placeholder="输入标签"
     @blur="add" 
     @keyup.enter="$event.target.blur()"
     :value="bq" />
    <div v-else class="text" @dblclick="bj">{{item}}</div>
  </div>
</template>

<script>
export default {
  props:{
    item:{
      type:String,
    }
  },
  methods:{
    add(e){
      if(e.target.value.trim()===''){
        this.bq=this.item, alert('内容不能为空') 
        } else{
        this.bq=e.target.value.trim()
        this.$emit('hello',this.bq)
      }
      this.flag = false;
    },

     bj(){
    this.flag=!this.flag
    this.bq=this.item
    this.$nextTick(()=>{
        this.$refs.bqa.focus()
    })
    
  }
  },
  data() {
    return {
      bq:'',
      flag: false
    };
  },
 
};
</script>

<style scoped lang="less">
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>
